<template>
  <div class="container">
    <div class="nav">
      <van-nav-bar title="地址编辑" @click-left="$router.back()">
        <template #left>
          <van-icon name="arrow-left" size="1rem" color="black" />
        </template>
      </van-nav-bar>
    </div>
    <div class="content">
      <van-address-edit
        :area-list="areaList"
        show-postal
        show-delete
        show-set-default
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
      />
    </div>
  </div>
</template>

<script>
import { AddressEdit, Toast, NavBar, Icon } from "vant";
import areaList from "./area";
export default {
  components: {
    "van-address-edit": AddressEdit,
    "van-nav-bar": NavBar,
    "van-icon": Icon
  },
  data() {
    return {
      areaList,
      searchResult: []
    };
  },
  methods: {
    onSave() {
      console.log(this.$route.params.id);
      Toast("save");
    },
    onDelete() {
      console.log(this.$route.params.id);
      Toast("delete");
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  background-color: #f7f7f7;
}
</style>